{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import button %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datepicker_css'
    '@chosen_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <div class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box" style="opacity: 1;">
            <div class="widget-header widget-header-small">
                <h5 class="widget-title">{{ 'Report Condition'|trans }}</h5>
                <!-- /section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <a data-action="collapse" href="#">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <div class="widget-main">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="form-field-1" class="col-sm-3 control-label no-padding-right">
                                {{ 'Report Type'|trans }}
                            </label>
                            <div class="col-sm-9">
                                <label onclick="switchDate(1)">
                                    <input type="radio" class="ace" id="report_type_daily" name="report_type" checked value="day">
                                    <span class="lbl"> {{ 'Daily Report'|trans }}</span>
                                </label>
                                <label onclick="switchDate(2)">
                                    <input type="radio" class="ace" id="report_type_monthly" name="report_type" value="month">
                                    <span class="lbl"> {{ 'Monthly Report'|trans }}</span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="start_date" class="col-sm-3 control-label no-padding-right"> {{ 'Date'|trans }} </label>
                            <div class="col-sm-9">
                                <span class="col-sm-2 "><input type="text" id="start_date" class="col-sm-12" placeholder="{{ 'Start Date'|trans }}"></span>
                                <span class="col-sm-2 "><input type="text" id="end_date" class="col-sm-12" placeholder="{{ 'End Date'|trans }}"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ag_id" class="col-sm-3 control-label no-padding-right"> {{ 'Agents'|trans }} </label>
                            <div class="col-sm-9">
                                <select data-placeholder="{{ 'Please Select Agents'|trans }}" id="ag_id" class="chosen-select tag-input-style" style="width: 410px" multiple>
                                    {% for key, agent in agents %}
                                        <option value="{{ key }}">{{ agent }}</option>
                                    {% endfor %}
                                </select>
                                <span class="help-inline ">
                                    <span class="middle">&nbsp;&nbsp;{{ 'This item is only for agent report'|trans }}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="que_id" class="col-sm-3 control-label no-padding-right"> {{ 'Queues'|trans }} </label>
                            <div class="col-sm-9">
                                <select data-placeholder="{{ 'Please Select Queues'|trans }}" id="que_id" class="chosen-select tag-input-style" style="width: 410px" multiple>
                                    {% for key, queue in queues %}
                                        <option value="{{ key }}">{{ queue }}</option>
                                    {% endfor %}
                                </select>
                                <span class="help-inline">
                                     <span class="middle">&nbsp;&nbsp;{{ 'This item is only for queue report'|trans }}</span>
                                </span>
                            </div>
                        </div>
                        {% if isEnableGroup != false %}
                            <div class="form-group">
                                <label for="group_id" class="col-sm-3 control-label no-padding-right"> {{ 'Group'|trans }} </label>
                                <div class="col-sm-9">
                                    <select data-placeholder="{{ 'Please Select Group'|trans }}" id="group_id" class="chosen-select tag-input-style" style="width: 410px" multiple>
                                        {% for key, group in groups %}
                                            <option value="{{ key }}">{{ group }}</option>
                                        {% endfor %}
                                    </select>
                                    <span class="help-inline">
                                        <span class="middle">&nbsp;&nbsp;{{ 'This item is only for group report'|trans }}</span>
                                    </span>
                                </div>
                            </div>
                        {% endif %}
                        <div class="form-group">
                            <label for="connSecs" class="col-sm-3 control-label no-padding-right"> {{ 'X Secs Conn Num'|trans }} </label>
                            <div class="col-sm-9">
                                <input type="text" id="connSecs" name="connSecs" class="col-sm-4" placeholder="{{ 'Conn Secs, Comma Separate Multi Values, eg. 10,20,30'|trans }}">
                                <span class="help-inline col-xs-12 col-sm-7">
                                    <span class="middle">{{ 'This item is only for inbound Conn In X Secs Num'|trans }}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="abandonSecs" class="col-sm-3 control-label no-padding-right"> {{ 'X Secs Abandon Num'|trans }} </label>
                            <div class="col-sm-9">
                                <input type="text" id="abandonSecs" name="abandonSecs" class="col-sm-4" placeholder="{{ 'Abandon Secs, Comma Separate Multi Values, eg. 10,20,30'|trans }}">
                                <span class="help-inline col-xs-12 col-sm-7">
                                    <span class="middle">{{ 'This item is only for inbound Abandon In X Secs Num'|trans }}</span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="validSecs" class="col-sm-3 control-label no-padding-right"> {{ 'Valid Secs'|trans }} </label>
                            <div class="col-sm-9">
                                <input type="text" id="validSecs" name="validSecs" class="col-sm-4" placeholder="{{ 'Valid Secs, Larger Than This Value Is Valid Call'|trans }}">
                                <span class="help-inline col-xs-12 col-sm-7">
                                    <span class="middle">{{ 'This item is only for Valid Secs'|trans }}</span>
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>
    <div class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box" style="opacity: 1;">
            <div class="widget-header widget-header-small">
                <h5 class="widget-title">{{ 'My Report'|trans }}</h5>
                <!-- /section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <a data-action="collapse" href="#">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <div class="widget-main">
                    <div id="myReport" class="tags" style="width: auto;border: none;cursor: pointer"></div>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>

    {% if loginType != 2 %}
    <div class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box" style="opacity: 1;">
            <div class="widget-header widget-header-small">
                <h5 class="widget-title">角色列表</h5>
                <!-- /section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <a data-action="collapse" href="#">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body">
                <div class="widget-main">
                    <div id="myRole" class="tags" style="width: auto;border: none;cursor: pointer">
                        {% for role in roles %}
                            <button class="btn btn-success btn-padding" data-text="{{ role.roleId }}">
                                <span id="text_{{ role.roleId }}1">{{ role.name }}</span>&nbsp;&nbsp;&nbsp;
                            </button>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>
    {% endif %}

    <div id="widgetTab" class="col-xs-12 col-sm-12 widget-container-col">
        <!-- #section:custom/widget-box -->
        <div class="widget-box" style="opacity: 1;">
            <div class="widget-header widget-header-small">
                <h5 class="widget-title">{{ 'Custom Report Items'|trans }}</h5>
                <!-- /section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <a data-action="collapse" href="#">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>
                </div>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <div class="tabbable">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active">
                                <a href="#agent" data-toggle="tab">{{ 'Agent Report'|trans }}</a>
                            </li>
                            <li>
                                <a href="#queue" data-toggle="tab">{{ 'Queue Report'|trans }}</a>
                            </li>
                            <li>
                                <a href="#system" data-toggle="tab">{{ 'System Report'|trans }}</a>
                            </li>
                            {% if isEnableGroup != false %}
                            <li>
                                <a href="#group" data-toggle="tab">{{ 'Group Report'|trans }}</a>
                            </li>
                            {% endif %}
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane in active" id="agent">
                                <div class="row">
                                    {% for item, itemValue in reportItems.agent %}
                                        <div class="col-lg-2 col-sm-3 col-xs-6">
                                            <label>
                                                <input type="checkbox" id="{{ item }}" name="agent" parent="{{ itemValue.parent }}" value="{{ item }}"/>
                                                <span class="lbl"> {{ itemValue.text|trans }}</span>
                                            </label>
                                        </div>
                                    {% endfor %}
                                </div>
                                <div class="clearfix well well-sm">
                                    <div class="col-sm-offset-3 col-sm-9 col-md-offset-4 col-md-8">
                                        {{ button('Check All', 'check-all-agent', 'fa-check-square', 'btn-success') }}
                                        {{ button('Check None', 'check-none-agent', 'fa-square', 'btn-success') }}
                                        {{ button('Save Report', 'save-agent-report', 'fa-save', 'btn-info') }}
                                        {{ button('Generate Report', 'generate-agent-report') }}
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="queue">
                                <div class="tab-pane in active" id="queue">
                                    <div class="row">
                                        {% for item, itemValue in reportItems.queue %}
                                            <div class="col-lg-2 col-sm-3 col-xs-6">
                                                <label>
                                                    <input type="checkbox" id="{{ item }}" name="queue" parent="{{ itemValue.parent }}" value="{{ item }}" />
                                                    <span class="lbl"> {{ itemValue.text|trans }}</span>
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    <div class="clearfix well well-sm">
                                        <div class="col-sm-offset-3 col-sm-9 col-md-offset-4 col-md-8">
                                            {{ button('Check All', 'check-all-queue', 'fa-check-square', 'btn-success') }}
                                            {{ button('Check None', 'check-none-queue', 'fa-square', 'btn-success') }}
                                            {{ button('Save Report', 'save-queue-report', 'fa-save', 'btn-info') }}
                                            {{ button('Generate Report', 'generate-queue-report') }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="system">
                                <div class="row">
                                    {% for item, itemValue in reportItems.system %}
                                        <div class="col-lg-2 col-sm-3 col-xs-6">
                                            <label>
                                                <input type="checkbox" id="{{ item }}" name="system" parent="{{ itemValue.parent }}" value="{{ item }}"  />
                                                <span class="lbl"> {{ itemValue.text|trans }}</span>
                                            </label>
                                        </div>
                                    {% endfor %}
                                </div>
                                <div class="clearfix well well-sm">
                                    <div class="col-sm-offset-3 col-sm-9 col-md-offset-4 col-md-8">
                                        {{ button('Check All', 'check-all-system', 'fa-check-square', 'btn-success') }}
                                        {{ button('Check None', 'check-none-system', 'fa-square', 'btn-success') }}
                                        {{ button('Save Report', 'save-system-report', 'fa-save', 'btn-info') }}
                                        {{ button('Generate Report', 'generate-system-report') }}
                                    </div>
                                </div>
                            </div>
                            {% if isEnableGroup != false %}
                                <div class="tab-pane" id="group">
                                    <div class="row">
                                        {% for item, itemValue in reportItems.group %}
                                            <div class="col-lg-2 col-sm-3 col-xs-6">
                                                <label>
                                                    <input type="checkbox" id="{{ item }}" name="group" parent="{{ itemValue.parent }}" value="{{ item }}"  />
                                                    <span class="lbl"> {{ itemValue.text|trans }}</span>
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                    <div class="clearfix well well-sm">
                                        <div class="col-sm-offset-3 col-sm-9 col-md-offset-4 col-md-8">
                                            {{ button('Check All', 'check-all-group', 'fa-check-square', 'btn-success') }}
                                            {{ button('Check None', 'check-none-group', 'fa-square', 'btn-success') }}
                                            {{ button('Save Report', 'save-group-report', 'fa-save', 'btn-info') }}
                                            {{ button('Generate Report', 'generate-group-report') }}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>
    <div>
        <form id="theForm" action="{{ url('icsoc_custom_report_generate') }}" method="post">
            <input type="hidden" id="data" name="data" value="">
            <input type="hidden" id="role_id" name="role_id" value="">
        </form>
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
    {% javascripts
    '@datepicker_js'
    '@chosen_js'
    '@gritter_js'
    '@common_js'
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="application/javascript">
        var role_id = 0;
        function switchDate(flag) {
            $("#start_date").data("DateTimePicker").destroy();
            $("#end_date").data("DateTimePicker").destroy();
            switch (parseInt(flag)) {
                case 1:
                    showDay();
                    break;
                case 2:
                    showMonth();
                    break;
                default:
                    break;
            }
        }
        /**
         * 展现日期
         * */
        function showDay()
        {
            $('#start_date').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: 'zh-cn',
                widgetPositioning:{horizontal:'left'}
            }).val('{{ 'now'|date('Y-m-d') }}');
            $('#end_date').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: 'zh-cn',
                widgetPositioning:{horizontal:'left'}
            }).val('{{ 'now'|date('Y-m-d') }}');
        }
        /**
        * 展现月
        * */
        function showMonth()
        {
            $('#start_date').datetimepicker({
                format: 'YYYY-MM',
                locale: 'zh-cn',
                viewMode: 'years',
                defaultDate: '{{ 'now'|date('Y-m') }}',
                widgetPositioning:{horizontal:'left'}
            });
            $('#end_date').datetimepicker({
                format: 'YYYY-MM',
                locale: 'zh-cn',
                viewMode: 'years',
                defaultDate: '{{ 'now'|date('Y-m') }}',
                widgetPositioning:{horizontal:'left'}
            });
        }
        $(document).ready(function() {

            $('#myRole').on('click', '.btn', function() {
                role_id = $(this).attr('data-text');

                $.ajax({
                    url: '{{ path("icsoc_custom_report_config") }}',
                    dataType: 'json',
                    type: 'post',
                    data: {role_id: role_id},
                    success: function (responce) {
                        $.each(responce, function(index, result) {
                            $("#"+index+" .row").empty();
                            var $content = '';
                            $.each(result, function(ind, value) {
                                $content += '<div class="col-lg-2 col-sm-3 col-xs-6">\
                                <label>\
                                    <input type="checkbox" id="'+ind+'" name="'+index+'" parent="'+value.parent+'" value="'+ind+'"  />\
                                    <span class="lbl">'+value.text+'</span>\
                                </label>\
                            </div>'
                            });

                            $("#"+index+" .row").append($content);

                        });
                    }
                });

                $('#myRole button').removeClass('btn-danger').addClass('btn-success');
                $(this).removeClass('btn-success').addClass('btn-danger');
                loadMyReport(role_id);
            });

            showDay();
            $('.chosen-select').chosen({no_results_text:'{{ 'Not found'|trans }}'});
            loadMyReport(role_id);

            //坐席报表
            $('#generate-agent-report').on('click', function() {
                generateAgentReport('', role_id);
            });
            //全选
            $('#check-all-agent').on('click', function() {
                $('input[name=agent]').prop('checked', true);
            });
            $('#check-none-agent').on('click', function() {
                $('input[name=agent]').prop('checked', false);
            });
            $('input[name=agent]').on('click', function() {
                if ($(this).attr('parent')) {
                    $('#agent').find('#'+$(this).attr('parent')).prop('checked', true);
                }
            });
            //保存坐席报表
            $('#save-agent-report').on('click', function() {
                bootbox.prompt({
                    title: "{{ "Please Input Your Report Name(Only save report items)"|trans }}",
                    buttons: {
                        confirm: {
                            label: "{{ 'OK'|trans }}",
                            className: "btn-primary"
                        },
                        cancel: {
                            label: "{{ 'Cancel'|trans }}",
                            className: "btn-default"
                        }
                    },
                    callback: function(result) {
                        if (result == null) {
                            //do nothing
                        } else if (!result) {
                            return false;
                        } else {
                            var $items = [];
                            $('input[type=checkbox][name=agent]:checked').each(function() {
                                $items.push($(this).val());
                            });
                            $.ajax({
                                url: '{{ path("icsoc_custom_report_save") }}',
                                dataType: 'json',
                                type: 'post',
                                data: {name: result, items: $items.join(','), report_type: 'agent', role_id:role_id},
                                success: function () {
                                    gritterAlert('{{ "Alert"|trans }}', '{{ "Save Report Success"|trans }}', 'success');
                                    loadMyReport(role_id);
                                }
                            });
                        }
                    }
                });
            });

            //技能组报表
            $('#generate-queue-report').on('click', function() {
                generateQueueReport('', role_id);
            });
            //全选
            $('#check-all-queue').on('click', function() {
                $('input[name=queue]').prop('checked', true);
            });
            $('#check-none-queue').on('click', function() {
                $('input[name=queue]').prop('checked', false);
            });
            $('input[name=queue]').on('click', function() {
                if ($(this).attr('parent')) {
                    $('#queue').find('#'+$(this).attr('parent')).prop('checked', true);
                }
            });
            //保存报表
            $('#save-queue-report').on('click', function() {
                bootbox.prompt({
                    title: "{{ "Please Input Your Report Name(Only save report items)"|trans }}",
                    buttons: {
                        confirm: {
                            label: "{{ 'OK'|trans }}",
                            className: "btn-primary"
                        },
                        cancel: {
                            label: "{{ 'Cancel'|trans }}",
                            className: "btn-default"
                        }
                    },
                    callback: function(result) {
                        if (result == null) {
                            //do nothing
                        } else if (!result) {
                            return false;
                        } else {
                            var $items = [];
                            $('input[type=checkbox][name=queue]:checked').each(function() {
                                $items.push($(this).val());
                            });
                            $.ajax({
                                url: '{{ path("icsoc_custom_report_save") }}',
                                dataType: 'json',
                                type: 'post',
                                data: {name: result, items: $items.join(','), report_type: 'queue', role_id:role_id},
                                success: function () {
                                    gritterAlert('{{ "Alert"|trans }}', '{{ "Save Report Success"|trans }}', 'success');
                                    loadMyReport(role_id);
                                }
                            });
                        }
                    }
                });
            });

            //呼叫中心报表
            $('#generate-system-report').on('click', function() {
                generateSystemReport('', role_id);
            });
            //全选
            $('#check-all-system').on('click', function() {
                $('input[name=system]').prop('checked', true);
            });
            $('#check-none-system').on('click', function() {
                $('input[name=system]').prop('checked', false);
            });
            $('input[name=system]').on('click', function() {
                if ($(this).attr('parent')) {
                    $('#system').find('#'+$(this).attr('parent')).prop('checked', true);
                }
            });
            //保存坐席报表
            $('#save-system-report').on('click', function() {
                bootbox.prompt({
                    title: "{{ "Please Input Your Report Name(Only save report items)"|trans }}",
                    buttons: {
                        confirm: {
                            label: "{{ 'OK'|trans }}",
                            className: "btn-primary"
                        },
                        cancel: {
                            label: "{{ 'Cancel'|trans }}",
                            className: "btn-default"
                        }
                    },
                    callback: function(result) {
                        if (result == null) {
                            //do nothing
                        } else if (!result) {
                            return false;
                        } else {
                            var $items = [];
                            $('input[type=checkbox][name=system]:checked').each(function() {
                                $items.push($(this).val());
                            });
                            $.ajax({
                                url: '{{ path("icsoc_custom_report_save") }}',
                                dataType: 'json',
                                type: 'post',
                                data: {name: result, items: $items.join(','), report_type: 'system', role_id:role_id},
                                success: function () {
                                    gritterAlert('{{ "Alert"|trans }}', '{{ "Save Report Success"|trans }}', 'success');
                                    loadMyReport(role_id);
                                }
                            });
                        }
                    }
                });
            });
        });

        //业务组报表
        $('#generate-group-report').on('click', function() {
            generateGroupReport('', role_id);
        });
        //全选
        $("#check-all-group").on('click', function() {
            $('input[name=group]').prop('checked', true);
        })
        //全不选
        $("#check-none-group").on('click', function() {
            $('input[name=group]').prop('checked', false);
        })
        $('input[name=group]').on('click', function() {
            if ($(this).attr('parent')) {
                $('#group').find('#'+$(this).attr('parent')).prop('checked', true);
            }
        });

        //保存报表
        $('#save-group-report').on('click', function() {
            bootbox.prompt({
                title: "{{ "Please Input Your Report Name(Only save report items)"|trans }}",
                buttons: {
                    confirm: {
                        label: "{{ 'OK'|trans }}",
                        className: "btn-primary"
                    },
                    cancel: {
                        label: "{{ 'Cancel'|trans }}",
                        className: "btn-default"
                    }
                },
                callback: function(result) {
                    if (result == null) {
                        //do nothing
                    } else if (!result) {
                        return false;
                    } else {
                        var $items = [];
                        $('input[type=checkbox][name=group]:checked').each(function() {
                            $items.push($(this).val());
                        });
                        $.ajax({
                            url: '{{ path("icsoc_custom_report_save") }}',
                            dataType: 'json',
                            type: 'post',
                            data: {name: result, items: $items.join(','), report_type: 'group', role_id:role_id},
                            success: function () {
                                gritterAlert('{{ "Alert"|trans }}', '{{ "Save Report Success"|trans }}', 'success');
                                loadMyReport(role_id);
                            }
                        });
                    }
                }
            });
        });

        //生成坐席报表
        function generateAgentReport($savedItems, $roleId) {
            var $start_date = $('#start_date');
            var $end_date = $('#end_date');
            if (!$start_date.val()) {
                $start_date.parent().parent().addClass('has-error');
                $start_date.focus();
                return;
            }
            if (!$end_date.val()) {
                $end_date.parent().parent().addClass('has-error');
                $end_date.focus();
                return;
            }
            var $data = {};
            //console.log($savedItems);
            if ($savedItems) {
                $data.items = $savedItems.split(',');
            } else {
                $data.items = [];
                $('input[type=checkbox][name=agent]:checked').each(function() {
                    $data.items.push($(this).val());
                });

                if (!$data.items.length) {
                    gritterAlert('{{ "Alert"|trans }}', '{{ "Please Select Report Items"|trans }}', 'error');
                    return;
                }
            }

            $data.type = 'agent';
            $data.report_type = $('input[name=report_type]:checked').val();
            $data.start_date = $start_date.val();
            $data.end_date = $end_date.val();
            var $ag_id = $('#ag_id').val() || [];
            var $que_id = $('#que_id').val() || [];
            $data.ag_id = $ag_id.join(',');
            $data.que_id = $que_id.join(',');
            $data.connSecs = $('#connSecs').val();
            $data.abandonSecs = $('#abandonSecs').val();
            $data.validSecs = $('#validSecs').val();
            $data.role_id = $roleId;

            $('#data').val(jsonToString($data));
            $('#role_id').val($roleId);
            $('#theForm').submit();
        }
        //生成技能组报表
        function generateQueueReport($items, $roleId) {
            var $start_date = $('#start_date');
            var $end_date = $('#end_date');
            if (!$start_date.val()) {
                $start_date.parent().parent().addClass('has-error');
                $start_date.focus();
                return;
            }
            if (!$end_date.val()) {
                $end_date.parent().parent().addClass('has-error');
                $end_date.focus();
                return;
            }
            var $data = {};
            if ($items) {
                $data.items = $items.split(',');
            } else {
                $data.items = [];
                $('input[type=checkbox][name=queue]:checked').each(function() {
                    $data.items.push($(this).val());
                });

                if (!$data.items.length) {
                    gritterAlert('{{ "Alert"|trans }}', '{{ "Please Select Report Items"|trans }}', 'error');
                    return;
                }
            }

            $data.type = 'queue';
            $data.report_type = $('input[name=report_type]:checked').val();
            $data.start_date = $start_date.val();
            $data.end_date = $end_date.val();
            var $ag_id = $('#ag_id').val() || [];
            var $que_id = $('#que_id').val() || [];
            $data.ag_id = $ag_id.join(',');
            $data.que_id = $que_id.join(',');
            $data.connSecs = $('#connSecs').val();
            $data.abandonSecs = $('#abandonSecs').val();
            $data.validSecs = $('#validSecs').val();
            $data.role_id = $roleId;

            $('#data').val(jsonToString($data));
            $('#role_id').val($roleId);
            $('#theForm').submit();
        }

        function generateSystemReport($items, $roleId) {
            var $start_date = $('#start_date');
            var $end_date = $('#end_date');
            if (!$start_date.val()) {
                $start_date.parent().parent().addClass('has-error');
                $start_date.focus();
                return;
            }
            if (!$end_date.val()) {
                $end_date.parent().parent().addClass('has-error');
                $end_date.focus();
                return;
            }
            var $data = {};
            if ($items) {
                $data.items = $items.split(',');
            } else {
                $data.items = [];
                $('input[type=checkbox][name=system]:checked').each(function() {
                    $data.items.push($(this).val());
                });

                if (!$data.items.length) {
                    gritterAlert('{{ "Alert"|trans }}', '{{ "Please Select Report Items"|trans }}', 'error');
                    return;
                }
            }

            $data.type = 'system';
            $data.report_type = $('input[name=report_type]:checked').val();
            $data.start_date = $start_date.val();
            $data.end_date = $end_date.val();
            var $ag_id = $('#ag_id').val() || [];
            var $que_id = $('#que_id').val() || [];
            $data.ag_id = $ag_id.join(',');
            $data.que_id = $que_id.join(',');
            $data.connSecs = $('#connSecs').val();
            $data.abandonSecs = $('#abandonSecs').val();
            $data.validSecs = $('#validSecs').val();
            $data.role_id = $roleId;

            $('#data').val(jsonToString($data));
            $('#role_id').val($roleId);
            $('#theForm').submit();
        }

        //生成业务组报表
        function generateGroupReport($items, $roleId) {
            var $start_date = $('#start_date');
            var $end_date = $('#end_date');
            if (!$start_date.val()) {
                $start_date.parent().parent().addClass('has-error');
                $start_date.focus();
                return;
            }
            if (!$end_date.val()) {
                $end_date.parent().parent().addClass('has-error');
                $end_date.focus();
                return;
            }
            var $data = {};
            if ($items) {
                $data.items = $items.split(',');
            } else {
                $data.items = [];
                $('input[type=checkbox][name=group]:checked').each(function() {
                    $data.items.push($(this).val());
                });

                if (!$data.items.length) {
                    gritterAlert('{{ "Alert"|trans }}', '{{ "Please Select Report Items"|trans }}', 'error');
                    return;
                }
            }

            $data.type = 'group';
            $data.report_type = $('input[name=report_type]:checked').val();
            $data.start_date = $start_date.val();
            $data.end_date = $end_date.val();
            var $group_id = $('#group_id').val() || [];
            var $que_id = $('#que_id').val() || [];
            $data.group_id = $group_id.join(',');
            $data.que_id = $que_id.join(',');
            $data.connSecs = $('#connSecs').val();
            $data.abandonSecs = $('#abandonSecs').val();
            $data.validSecs = $('#validSecs').val();
            $data.role_id = $roleId;

            $('#data').val(jsonToString($data));
            $('#role_id').val($roleId);
            $('#theForm').submit();
        }

        //加载我的报表
        function loadMyReport(role_id) {
            $.ajax({
                url: '{{ path("icsoc_custom_report_get") }}',
                dataType: 'json',
                type: 'post',
                data: {'roleId': role_id},
                success: function (response) {
                    var $myReport = $('#myReport');
                    $myReport.empty();

                    if (response.length <= 0) {
                        var $info = '{{ "You have no custom reports"|trans }}';
                        $myReport.append($('<div class="alert alert-danger">'+$info+'</div>'));
                        return;
                    }

                    $.each(response, function(index, row) {
                        var $icon = 'fa-area-chart';
                        switch (row.reportType) {
                            case 'agent': $icon = 'fa-user';break;
                            case 'queue': $icon = 'fa-users';break;
                            case 'system': $icon = 'fa-dashboard';break;
                        }
//                        var $report = $('<button class="btn btn-info btn-sm">' +
//                        '<i class="fa '+$icon+'"></i> '+row.name+' &nbsp;&nbsp;</button>');
                        var $report = $('<span class="tag" id="tag_'+row.id+'"><span onclick="jumpReport(\''+row.reportType+'\',\''+row.items+'\',\''+row.roleId+'\')">' +
                                '<i class="fa '+$icon+'"></i>&nbsp;&nbsp;'+row.name+
                                '</span><button type="button" class="close" onclick="delTag('+row.id+')">×</button></span>')
//                        $report.on('click', function() {
//                            switch (row.reportType) {
//                                case 'agent': generateAgentReport(row.items);break;
//                                case 'queue': generateQueueReport(row.items);break;
//                                case 'system': generateSystemReport(row.items);break;
//                            }
//                        });
                        $myReport.append($report).append($('<span>&nbsp;</span>'));
                    });
                }
            });
        }
        //删除标签；
        function delTag(id)
        {
            $.ajax({
                type:'get',
                url:'{{ path('icsoc_custom_report_del_tag') }}',
                data: 'id='+id,
                success:function(res){
                    if (res.error) {
                        gritterAlert('{{ 'Prompt'|trans }}', res.message, 'error');
                    } else {
                        $('#tag_'+id).remove();
                    }
                }
            })
        }
        /**
         * 跳转页面；
         * @param row
         */
        function jumpReport(type,items,roleId)
        {
            switch (type) {
                case 'agent': generateAgentReport(items, roleId);break;
                case 'queue': generateQueueReport(items, roleId);break;
                case 'system': generateSystemReport(items, roleId);break;
                case 'group': generateGroupReport(items, roleId);break;
            }
        }
    </script>
{% endblock %}